import React from 'react'
import { Modal } from 'antd'
import { Button, message, Form, Input } from 'antd';
import { adduser } from "./service"

const AddUserModel = ({ isModalOpen, setIsModalOpen }) => {

    const [form] = Form.useForm();

    const onFinish = values => {
        console.log('Success:', values);
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    const handleOk = () => {

        form.validateFields().then(values => {
            console.log(values)
            return
            adduser(values).then(res => {
                console.log(res)
                if (res.code == 0) {
                    setIsModalOpen(false)
                    message.success("添加成功")
                } else {
                    message.error(res.msg)
                }
            })
        })

        // setIsModalOpen(false)
    }


    return (
        <div>
            <Modal
                title="新建用户"
                visible={isModalOpen}
                onOk={handleOk}
                onCancel={() => setIsModalOpen(false)}
            >
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    form={form}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input placeholder='请输入用户名' />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password_hash"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password placeholder='请输入密码' />
                    </Form.Item>
                    <Form.Item
                        label="确认密码"
                        name="password_hash_confirm"
                        dependencies={['password_hash']}   // 依赖字段，密码变化时自动重新校验
                        rules={[
                            { required: true, message: '请输入确认密码!' },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password_hash') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('两次密码不一致'));
                                },
                            }),
                        ]}
                    >
                        <Input.Password placeholder="请输入确认密码" />
                    </Form.Item>



                </Form>
            </Modal>
        </div>
    )
}

export default AddUserModel